<template>
    <div class="table-page">
        <div class="table-search-box" @keyup.enter="search()">
            <div class="search-item">
                <label>名称：</label>
                <div class="table-query-input">
                    <el-input
                        v-model="queryData.name"
                        clearable
                        placeholder="请输入"
                    ></el-input>
                </div>
            </div>

            <div class="search-item">
                <el-button
                    type="primary"
                    icon="el-icon-search"
                    :loading="tableLoading"
                    @click="clickSearch()"
                    >搜索
                </el-button>
            </div>
            <div class="search-item">
                <el-button
                    icon="el-icon-refresh"
                    :loading="tableLoading"
                    @click="resetSearch()"
                    >重置
                </el-button>
            </div>
        </div>
        <div class="table-operation-box">
            <el-button
                type="primary"
                style="margin-bottom: 2em"
                icon="el-icon-plus"
                @click="clickAdd('新增')"
                >添加标签
            </el-button>
            <el-button
                type="danger"
                style="margin-bottom: 2em"
                icon="el-icon-delete"
                :disabled="selectDisable"
                @click="
                    tableDelete(
                        '/exam/package/tag/deletes',
                        {
                            ids: tableSelect
                        },
                        true
                    )
                "
                >批量删除
            </el-button>
        </div>
        <div class="table-data-box">
            <el-table
                ref="table"
                v-loading="tableLoading"
                :data="tableData"
                border
                style="width: 100%;min-height:40em"
                row-key="id"
                @selection-change="tableSelectionChange"
            >
                <el-table-column type="selection" width="55" align="center">
                </el-table-column>
                <el-table-column
                    prop="name"
                    label="名称"
                    min-width="100"
                ></el-table-column>
                <el-table-column
                    prop="examName"
                    label="所属考试"
                    min-width="100"
                ></el-table-column>
                <el-table-column prop="sort" label="排序" width="150">
                    <template
                        slot-scope="scope"
                        v-loading="scope.row.opLoading"
                    >
                        <div
                            v-show="!scope.row.sortEdit"
                            @dblclick="scope.row.sortEdit = true"
                        >
                            {{ scope.row.sort }}
                        </div>
                        <el-input
                            v-show="scope.row.sortEdit"
                            v-model="scope.row.sort"
                            @blur="
                                sortEditSave(
                                    '/exam/package/tag/change-sort',
                                    scope.row
                                )
                            "
                        ></el-input>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="300" align="center">
                    <template slot-scope="scope">
                        <el-button
                            v-if="!scope.row.edit"
                            class="primary"
                            type="text"
                            size="mini"
                            icon="el-icon-edit"
                            :loading="scope.row.opLoading"
                            @click="clickSimpleEdit(scope.row, '编辑',() => {},
                                    coverData)"
                            >编辑
                        </el-button>
                        <el-button
                            v-if="!scope.row.edit"
                            type="text"
                            size="mini"
                            class="danger"
                            icon="el-icon-delete"
                            :loading="scope.row.opLoading"
                            @click="
                                tableDelete(
                                    '/exam/package/tag/delete',
                                    {
                                        id: scope.row.id
                                    },
                                    true
                                )
                            "
                            >删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div v-if="pageData.total" class="xy-between table-page-box">
            <el-pagination
                background
                :current-page.sync="pageData.currentPage"
                :page-sizes="pageData.pageSizes"
                :page-size.sync="pageData.pageSize"
                layout="total,  prev, pager, next, sizes, jumper"
                :total="pageData.total"
            >
            </el-pagination>
        </div>

        <el-dialog
            :title="dialogFormTitle"
            :visible.sync="dialogFormVisible"
            :before-close="dialogClose"
            custom-class="one-dialog"
        >
            <el-form
                ref="dataForm"
                :model="dataForm"
                label-width="6em"
                :rules="dataFormRule"
                class="table-edit-from"
            >
                <el-form-item label="名称" prop="name">
                    <el-input v-model="dataForm.name"></el-input>
                </el-form-item>
<!--                <el-form-item label="所属考试" prop="examName">-->
<!--                    <el-input v-model="dataForm.examName" disabled></el-input>-->
<!--                </el-form-item>-->

                <el-form-item label="标签类型">
                    <el-radio-group v-model="dataForm.packageTagType">
                        <el-radio
                            v-for="key in Object.keys(packageTagType)"
                            :key="key"
                            :label="key"
                        >{{ packageTagType[key].desc }}
                        </el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item
                    label="行业"
                    prop="industryId"
                >
                    <el-select
                        v-model="dataForm.industryId"
                        placeholder="请选择行业"
                        clearable
                    >
                        <el-option
                            v-for="item in industryData"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id"
                        >
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item
                    label="考试"
                    prop="examId"
                >
                    <el-select
                        v-model="dataForm.examId"
                        placeholder="请选择考试"
                        clearable
                        filterable
                        reserve-keyword
                    >
                        <el-option
                            v-for="item in examData"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id"
                        >
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="排序" prop="sort">
                    <el-input v-model="dataForm.sort"></el-input>
                </el-form-item>

            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button :loading="submitFlag" @click="dialogClose"
                    >取 消</el-button
                >
                <el-button
                    :loading="submitFlag"
                    type="primary"
                    @click="formDataSave('/exam/package/tag/update')"
                    >保 存</el-button
                >
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { TablePage } from "@/layout/mixin/iVue.js";
import { mapState } from "vuex";
import { updateHotword } from "@/api/user";
import {get} from "@/api/request";

export default {
    name: "Tag",
    components: {},
    mixins: [TablePage],
    data() {
        return {
            tabClickIndex: null,
            tabClickLabel: "",
            queryData: {
                name: "",
                code: "",
                enable: null
            },
            industryData: [],
            industryFlag: false,
            examFlag: false,
            examData:[],
            initAddForm: {
                name: null,
                code: null,
                url: null,
                examName:"通用",
                examId:null,
                industryId:null,
            },
            dataFormRule: {
                name: [
                    {
                        required: true,
                        message: "请输入名称",
                        trigger: "blur"
                    }
                ],
                sort: [
                    {
                        required: true,
                        message: "请输入排序",
                        trigger: "blur"
                    }
                ],
            }
        };
    },
    computed: {
        ...mapState({
            packageTagType: state => state.status.packageTagType
        })
    },
    watch: {
        "dataForm.examType"(examType) {
            if (examType === "gjtk") {
                this.dataForm.industryId = "gjtk";
            } else if (this.dataForm.industryId === "gjtk") {
                this.dataForm.industryId = null;
            }
        },
        "dataForm.industryId"(industryId) {
            this.examData=[];
            this.dataForm.examId="";
            if(industryId){
                this.loadExam(industryId);
            }

        },
        // "dataForm.examId"(examId) {
        //     if (!examId || examId === "0"){
        //         this.dataForm.examName="通用";
        //     }else {
        //         this.changeExamName(examId);
        //     }
        //
        // },
    },
    created() {
        this.loadIndustry();
    },
    mounted() {},
    methods: {
        search(queryData) {
            this.loadTable("/exam/package/tag/page", queryData);
        },
        coverData(data) {
            data.examType =
                data.industryId === "gjtk"
                    ? "gjtk"
                    : "zhiye";
            // this.loadOldData(data.id);
            return { ...data};
        },
        changeExamName(examId){
            this.examData.forEach( e =>{
                if(examId === e.id){
                    this.dataForm.examName=e.name;
                    return;
                }
            })
        },
        loadIndustry() {
            this.industryFlag = true;
            get("/exam/industry/list",{size: 1000})
                .then(res => {
                    this.industryData = res;
                })
                .finally(() => {
                    this.industryFlag = false;
                });
        },
        loadExam(industryId, name) {
            this.examFlag = true;
            get("/exam/exam/list", {
                industryId,
                name,
                size: 1000
            })
                .then(res => {
                    this.examData = res;
                })
                .finally(() => {
                    this.examFlag = false;
                });
        },
    }
};
</script>

<style lang="scss" scoped>
.school-logo {
    .logo-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 108px;
        height: 108px;
        line-height: 108px;
        text-align: center;
    }

    .logo-img {
        width: 108px;
        height: 108px;
        display: block;
    }
}

.table-edit-from {
    .address-select {
        width: 8em;
        margin-right: 2em;
    }
}
</style>
<style>
.school-logo .logo-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.school-logo .logo-uploader .el-upload:hover {
    border-color: #409eff;
}
</style>
